<template>
  <div>
    <div class="model" ref="model">
      <div class="left">
        <a href="https://www.sjtu.edu.cn/" target="_blank">
          <img src="@/assets/images/LogoWhite.png" alt="" class="logo" />
        </a>
      </div>
      <div class="right" v-show="modelShow">
        <div>
          <ul class="viewType clearFix">
            <li>
              <a href="https://www.sjtu.edu.cn/fk/index.html" target="_blank">
                <i class="iconfont icon-fangke"></i>
                <span>访客</span>
              </a>
            </li>
            <li>
              <a href="https://www.sjtu.edu.cn/xs/index.html" target="_blank">
                <i class="iconfont icon-xuesheng"></i>
                <span>学生</span>
              </a>
            </li>
            <li>
              <a href="https://www.sjtu.edu.cn/js/index.html" target="_blank">
                <i class="iconfont icon-jiaoshi"></i>
                <span>教师</span>
              </a>
            </li>
            <li>
              <a href="https://www.sjtu.edu.cn/xy/index.html" target="_blank">
                <i class="iconfont icon-xiaoyou"></i>
                <span>校友</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="nav-box">
          <ul class="nav-ul clearFix">
            <li v-for="(item, index) in navList" :key="index" class="nav-li">
              <a href="javascript:void(0);" class="nav-a">{{ item.name }}</a>
              <div class="colNav clearFix">
                <ul
                  v-for="(ulIts, ulInd) in item.children"
                  :key="index + '' + ulInd"
                  class="colNav-ul"
                >
                  <li
                    v-for="(liIts, liInd) in ulIts"
                    :key="index + '' + ulInd + '' + liInd"
                  >
                    <a :href="liIts.path" class="liIts-a" target="_blank">{{
                      liIts.name
                    }}</a>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="model2" v-show="!modelShow">
      <div class="contain">
        <div>
          <ul class="left">
            <li v-for="(item, index) in navList" :key="index" class="nav-li">
              <a href="javascript:void(0);" class="nav-a">{{ item.name }}</a>
              <div class="colNav clearFix">
                <ul
                  v-for="(ulIts, ulInd) in item.children"
                  :key="index + '' + ulInd"
                  class="colNav-ul"
                >
                  <li
                    v-for="(liIts, liInd) in ulIts"
                    :key="index + '' + ulInd + '' + liInd"
                  >
                    <a :href="liIts.path" class="liIts-a" target="_blank">{{
                      liIts.name
                    }}</a>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
        <div>
          <ul class="viewType right">
            <li>
              <a href="https://www.sjtu.edu.cn/fk/index.html" target="_blank">
                <i class="iconfont icon-fangke"></i>
                <span>访客</span>
              </a>
            </li>
            <li>
              <a href="https://www.sjtu.edu.cn/xs/index.html" target="_blank">
                <i class="iconfont icon-xuesheng"></i>
                <span>学生</span>
              </a>
            </li>
            <li>
              <a href="https://www.sjtu.edu.cn/js/index.html" target="_blank">
                <i class="iconfont icon-jiaoshi"></i>
                <span>教师</span>
              </a>
            </li>
            <li>
              <a href="https://www.sjtu.edu.cn/xy/index.html" target="_blank">
                <i class="iconfont icon-xiaoyou"></i>
                <span>校友</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      modelShow: true,
      navList: [
        {
          name: "关于交大",
          children: [
            [
              {
                name: "学校简介",
                path: "https://www.sjtu.edu.cn/xxjj/index.html"
              },
              {
                name: "交大领导",
                path: "https://www.sjtu.edu.cn/jdld/index.html"
              },
              {
                name: "交大年报",
                path: "https://www.sjtu.edu.cn/jdnb/index.html"
              }
            ],
            [
              {
                name: "历史沿革",
                path: "https://www.sjtu.edu.cn/lsyg/index.html"
              },
              {
                name: "历任领导",
                path: "https://www.sjtu.edu.cn/lrld/index.html"
              },
              {
                name: "数据统计",
                path: "https://www.sjtu.edu.cn/sjtj/index.html"
              }
            ]
          ]
        },
        {
          name: "人才培养",
          children: [
            [
              {
                name: "本科生培养",
                path: "http://www.jwc.sjtu.edu.cn/"
              },
              {
                name: "本科生选课",
                path: "http://electsys.sjtu.edu.cn/"
              },
              {
                name: "本科生招生",
                path: "http://zsb.sjtu.edu.cn/"
              },
              {
                name: "等级考试",
                path: "http://ks.sjtu.edu.cn/"
              },
              {
                name: "创新实践",
                path: "http://uitp.sjtu.edu.cn/"
              }
            ],
            [
              {
                name: "研究生培养",
                path: "https://www.sjtu.edu.cn/lsyg/index.html"
              },
              {
                name: "研究生选课",
                path: "http://www.yjs.sjtu.edu.cn/ssfw/login.jsp"
              },
              {
                name: "研究生招生",
                path: "http://yzb.sjtu.edu.cn/"
              },
              {
                name: "招生简章",
                path: "http://yzb.sjtu.edu.cn/zsjz.htm"
              },
              {
                name: "综合服务",
                path: "http://www.gs.sjtu.edu.cn/index/yjsjyfwzx.htm"
              }
            ],
            [
              {
                name: "学生就业",
                path: "http://www.job.sjtu.edu.cn/"
              },
              {
                name: "海外访学",
                path: "http://studyabroad.sjtu.edu.cn/"
              },
              {
                name: "通识MOOC",
                path: "http://sjtu.fanya.chaoxing.com/portal"
              },
              {
                name: "学生创新",
                path: "http://engtc.sjtu.edu.cn/"
              },
              {
                name: "实践教学示范中心",
                path: "https://www.sjtu.edu.cn/syjxsfzx/index.html"
              }
            ],
            [
              {
                name: "教学信息服务网",
                path: "http://electsys.sjtu.edu.cn/"
              },
              {
                name: "评教与调查统计",
                path: "http://pingjiao.sjtu.edu.cn/"
              },
              {
                name: "教学发展",
                path: "http://ctld.sjtu.edu.cn/"
              },
              {
                name: "教学发展",
                path: "http://ctld.sjtu.edu.cn/"
              },
              {
                name: "教学发展",
                path: "http://ctld.sjtu.edu.cn/"
              }
            ]
          ]
        },
        {
          name: "师资建设",
          children: [
            [
              {
                name: "两院院士",
                path: "https://www.sjtu.edu.cn/zgkxyys/index.html"
              },
              {
                name: "人事管理",
                path: "http://rsc2.sjtu.edu.cn/HR/UI/SystemDefault.aspx"
              }
            ],
            [
              {
                name: "杰出人才",
                path: "https://www.sjtu.edu.cn/jcrc/index.html"
              },
              {
                name: "人才招聘",
                path: "http://join.sjtu.edu.cn/"
              }
            ]
          ]
        },
        {
          name: "科学研究",
          children: [
            [
              {
                name: "研究院",
                path: "https://www.sjtu.edu.cn/yjy/index.html"
              },
              {
                name: "国家级科研平台",
                path: "https://www.sjtu.edu.cn/gjjkypt/index.html"
              },
              {
                name: "智库机构",
                path: "https://www.sjtu.edu.cn/zkjg/index.html"
              }
            ],
            [
              {
                name: "科研管理系统",
                path: "http://ky.sjtu.edu.cn/epstar/login/index.jsp"
              },
              {
                name: "省部级科研平台",
                path: "https://www.sjtu.edu.cn/sbjkypt/index.html"
              },
              {
                name: "上海交大学报",
                path: "https://www.sjtu.edu.cn/shjdxb/index.html"
              }
            ]
          ]
        },
        {
          name: "全球交大",
          children: [
            [
              {
                name: "交流动态",
                path: "http://global.sjtu.edu.cn/NewsCenter/NewsList?type=1"
              }
            ],
            [
              {
                name: "留学交大",
                path: "http://isc.sjtu.edu.cn/"
              }
            ]
          ]
        },
        {
          name: "大学文化",
          children: [
            [
              {
                name: "文明在线",
                path: "http://wm.sjtu.edu.cn/"
              }
            ],
            [
              {
                name: "图书馆",
                path: "http://www.lib.sjtu.edu.cn/"
              }
            ]
          ]
        }
      ]
    };
  },
  watch: {
    "$store.state.scrollTop": {
      immediate: true,
      handler(newVal) {
        console.log("scrollTop==>>", newVal);
        this.$nextTick(() => {
          const modelDom = this.$refs.model;
          if (newVal >= modelDom.scrollHeight) {
            this.modelShow = false;
          } else {
            this.modelShow = true;
          }
        });
      }
    }
  }
};
</script>

<style scoped lang="scss">
.model {
  width: $base-width;
  padding-top: 60px;
  margin: 0 auto 0px auto;
  display: flex;
  justify-content: space-between;
  @media only screen and (min-width: 480px) and (max-width: 1200px) {
    /* 这里写宽度大于321px小于1024px的样式(一般是平板电脑) */
    width: 100%;
  }
  @media screen and (min-width: 320px) and (max-width: 480px) {
    /* 在这里写小屏幕设备的样式 */
    width: 100%;
  }
  .left {
    width: 25%;
    .logo {
      width: 100%;
    }
  }
  .right {
    flex-grow: 1;
    div {
      &:first-child {
        text-align: right;
      }
    }
    .viewType {
      display: inline-block;
      margin-bottom: 8px;
      li {
        float: left;
        color: #ffffff;
        a {
          padding: 8px 10px 5px 10px;
          color: inherit;
          transition: 0.3;
          &:hover {
            background-color: rgba(107, 0, 4, 0.8);
          }
          i {
            font-size: 12px;
          }
          span {
            margin-left: 5px;
            font-size: 10px;
          }
        }
      }
    }
    .nav-box {
      text-align: right;
      position: relative;
      z-index: 100;
      .nav-ul {
        border: 1px solid #fff;
        display: inline-block;
        .nav-li {
          float: left;
          position: relative;
          .nav-a {
            display: block;
            font-size: 12px;
            padding: 8px 15px;
            color: #fff;
            transition: 0.3s;
            &:hover {
              background-color: rgba(107, 0, 4, 0.8);
              // color: $base-color;
            }
          }
          &:hover .colNav {
            display: flex;
          }
          .colNav {
            position: absolute;
            left: 0;
            top: 100%;
            // transform: translateY(100%);
            background-color: #fff;
            border-radius: 3px;
            display: none;
            .colNav-ul {
              li {
                width: 90px;
                .liIts-a {
                  display: block;
                  font-size: 10px;
                  text-align: center;
                  padding: 8px 0;
                  // padding: 8px 15px;
                  color: #333;
                  transition: 0.3s;
                  font-weight: 600;
                  border: 1px solid #eee;
                  &:hover {
                    color: $base-color;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
.model2 {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  background-color: $base-color;
  z-index: 999;
  .contain {
    width: $base-width;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    .left {
      display: flex;
      .nav-li {
        position: relative;
        transition: 0.3s;
        &:hover {
          background-color: rgba(107, 0, 4, 0.8);
          .colNav {
            display: flex;
          }
        }
        .nav-a {
          font-size: 12px;
          padding: 8px 10px;
          display: block;
          color: #fff;
        }
        .colNav {
          position: absolute;
          left: 0;
          top: 100%;
          display: none;
          border-radius: 3px;
          .colNav-ul {
            background-color: #fff;
            li {
              width: 90px;
              .liIts-a {
                display: block;
                font-size: 10px;
                text-align: center;
                padding: 8px 0;
                // padding: 8px 15px;
                color: #333;
                transition: 0.3s;
                font-weight: 600;
                border: 1px solid #eee;
                &:hover {
                  color: $base-color;
                }
              }
            }
          }
        }
      }
    }
    .right {
      display: flex;
      height: 100%;
      li {
        a {
          height: 100%;
          color: #ffffff;
          display: flex;
          font-size: 10px;
          padding: 0 10px;
          transition: 0.3s;
          align-items: center;
          &:hover {
            background-color: rgba(107, 0, 4, 0.8);
          }
          i {
            font-size: 10px;
            margin-right: 5px;
          }
        }
      }
    }
  }
}
</style>
